<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>月份统计</title>
    <meta charset="utf-8">
    <link rel="icon" href="/resources/favicon.ico">
    <link rel="stylesheet" href="resources/layui/css/layui.css" th:href="@{/resources/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/layui_ext/dtree/dtree.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/layui_ext/dtree/font/dtreefont.css}" media="all"/>
</head>
<body>
<!--查询条件-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
    <legend>选择商品名称和年份来查看该商品有关年份的销售情况</legend>
</fieldset>
<form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品信息</label>
            <div class="layui-input-inline">
                <select name="goodsname" id="selectgoodsid">请选择商品名称
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">年份</label>
            <div class="layui-input-inline">
                <select name="yearname" id="selectyear">请选择年份
                    <option value="2020">2021</option>
                    <option value="2020">2020</option>
                    <option value ="2019">2019</option>
                    <option value="2018">2018</option>
                    <option value="2017">2017</option>
                    <option value ="2016">2016</option>
                    <option value ="2015">2015</option>
                    <option value ="2014">2014</option>
                </select>
            </div>
        </div>

    </div>
    <div class="layui-form-item" >
        <div class="layui-inline" style="padding-left: 3%">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doSearch" id="search"><i
                    class="layui-icon layui-icon-search layui-icon-normal"></i>查询
            </button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                    class="layui-icon layui-icon-refresh"></i><span>重置</span>
            </button>
        </div>
    </div>
</form>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
    //提升数据表格的作用域，因为底下还有一个reloadTable方法
    var tableIns;
    layui.extend({
        dtree: '/resources/layui_ext/dtree/dtree'
    }).use(['jquery', 'form', 'layer', 'table','upload','laydate','dtree'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var dtree = layui.dtree;

        //初始化查询条件的下拉列表
        $.get("/goods/loadAllGoodsNameSelect",function (res) {
            var data = res.data;
            var dom = $("#selectgoodsid");
            var html = '<option></option>';
            $.each(data,function (index, item) {
                html += '<option value="'+item.id+'"> '+'编号:'+''+item.id+''+'名称:'+''+item.goodsname+'</option>';
            })
            dom.html(html);
            //重新渲染下拉列表
            form.render("select");
        });
    });
    $("#search").click(function () {
        var goodsid = $("#selectgoodsid option:selected").val();
        var year = $("#selectyear option:selected").val();
        $.ajax({
            type: 'post',
            url: '/outport/loadMonthSales',
            data:{'goodsid':goodsid,'year':year},
            dataType: "JSON",
            success: function (data) {
                console.log(data);
                var json = eval("(" + JSON.stringify(data) + ")");
                myChart.setOption({
                    series:
                        [
                            {name: '入库量', type: 'bar', data: json.Insum},
                            {name: '出库量', type: 'bar', data: json.Outsum},
                            {name: '差值', type: 'line', yAxisIndex: 1, data: json.Diffsum}
                        ]
                });
            },
            error: function (error) {
                console.log(error);
            }
        });
    })

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        color: ['#ff7861', '#2a889c', '#ff7861'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#f39b14'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['入库量', '出库量', '差值']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量',
            },
            {
                type: 'value',
                name: '差值',
            }
        ],
        series: [
            {
                name: '入库量',
                type: 'bar',
                data: []
            },
            {
                name: '出库量',
                type: 'bar',
                data: []
            },
            {
                name: '差值',
                type: 'line',
                yAxisIndex: 1,
                data: []
            }
        ]
    });
</script>
</body>
</html>
